<script lang="ts" setup>
import ShowResources from '@/component/Upload/ShowResources.vue'
import { useAccountStore } from '@/config/store/UseAccountStore.ts'
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const accountStore = useAccountStore()

const nickname = computed(() => accountStore.account.nickname)

const router = useRouter()
const toAccountInfoPage = () => router.push('/account')

</script>

<template>
<div class="account-info" @click="toAccountInfoPage">
    <ShowResources :uri="accountStore.account.avatar">
        <template #default="{url}">
            <a-avatar
                    :image-url="url"
                    :size="100"
                    object-fit="cover"
                    referrerpolicy="no-referrer"
            >
            </a-avatar>
        </template>
    </ShowResources>
    <div class="name">{{ nickname }}</div>
</div>
</template>

<style lang="scss" scoped>
.account-info {
    height: 200px;
    padding: 50px 10px 10px;

    text-align: center;
    font-size: 20px;
    line-height: 40px;
    cursor: pointer;

    .name {
        padding: 10px 20px;
    }
}
</style>
